<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是:{{fmtTime}}</h3>
			<!-- mthods实现 -->
			<h3>现在是:{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是:{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		</div>
		<script type="text/javascript">
			Vue.filter('mySlice', function(value) { //全局过滤器
				return value.slice(0, 4)
			})
			const vm = new Vue({
				el: '#root',
				data: {
					time: 1637391640432
				},
				methods: {
					getFmtTime() {
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				computed: {
					fmtTime() {
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				filters: { //局部过滤器
					timeFormater(value, str = 'YYYY-MM-DD HH:mm:ss') {
						return dayjs(value).format(str)
					}
				}
			})
		</script>
	</body>
</html>
